<template>
  <div id="main">
    <m-header title='喵喵电影'></m-header>
    <div id="content">
      <div class="movie_menu">
				<router-link tag="div" to="/movie/city" class="city_name">
					<span>{{$store.state.city.nm}}</span><i class="iconfont icon-lower-triangle"></i>
				</router-link>
				<div class="hot_swtich">
					<router-link tag="div" to="/movie/nowing" class="hot_item">正在热映</router-link>
					<router-link tag="div" to="/movie/comming" class="hot_item">即将上映</router-link>
				</div>
				<router-link tag="div" to="/movie/search" class="search_entry">
					<i class="iconfont icon-sousuo"></i>
				</router-link>
			</div>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <m-tabbar></m-tabbar>
    <router-view name="detail"></router-view>
  </div>
</template>

<script>
import MHeader from '@/components/common/Header';
import MTabbar from '@/components/common/Tabbar';
import {messageBox} from '@/components/js'
import { setTimeout } from 'timers';

export default {
  components: {
    MHeader,MTabbar,
  },
  methods: {
    async fetch() {
      let res = await this.$axios.get('/api/getLocation')
      let nm = res.data.data.nm
      let id = res.data.data.id
      setTimeout(()=> {
        if(this.$store.state.city.id == id) {return}
        messageBox({
          title:'定位',
          content: nm,
          cancle: '取消',
          ok: '切换定位',
          handleCancle() {
            console.log('取消切换');
          },
          handleOk() {
            window.localStorage.setItem('cityNm', nm)
            window.localStorage.setItem('cityId', id)
            window.location.reload()
          }
        })
      }, 2000)
    }
  },
  mounted() {
    this.fetch()
  }
}
</script>

<style scoped>

#content .movie_menu{ width: 100%; height: 45px; border-bottom:1px solid #e6e6e6; display: flex; justify-content:space-between; align-items:center; background:white; z-index:10;}
.movie_menu .city_name{ margin-left: 20px; height:100%; line-height: 45px;}
.movie_menu .city_name.router-link-active{ color: #ef4238; }
.movie_menu .hot_swtich{ display: flex; height:100%; line-height: 45px;}
.movie_menu .hot_item{ font-size: 15px; color:#666; width:80px; text-align:center; margin:0 12px; font-weight:700;}
.movie_menu .hot_item.router-link-active{ color: #ef4238; }
.movie_menu .search_entry{ margin-right:20px; height:100%; line-height: 45px;}
.movie_menu .search_entry.router-link-active{ color: #ef4238; }
.movie_menu .search_entry i{ font-size:24px; color:red;}
</style>
